<template>
	<div class="reg">
		<form>
			<table>
				<tr>				<!-- 第一行 -->
					<td class="black">
						<span>
							<van-icon name="user-o" size="20"/>
						</span>
						<input type="text" v-model="username" placeholder="请输入用户名">
					</td>
				</tr>
				<tr>				<!-- 第二行 -->
					<td class="black">
						<span>
							<van-icon name="lock" size="20"/>
						</span>
						<input type="password" v-model="pwd" placeholder="请输入密码">
					</td>
				</tr>
				<tr>				<!-- 第三行 -->
					<td>
						<!-- <router-link class="tab-item" to="/Login"> -->
							<span class="grey" @click="toLog()">已有账号,登录</span>
						<!-- </router-link> -->
					</td>
				</tr>
				<tr>				<!-- 注册按钮 -->
					<td>
						<input type="submit" value="注册" @click="sub()">
					</td>
				</tr>
			</table>
		</form>
	</div>
</template>

<script>
	import {Toast} from 'vant';
	import axios from 'axios';
	var querystring = require('querystring');
	export default{
		name:"Reg",
		data(){
			return{
				username:'',
				pwd:'',
			};
		},
		methods:{
			sub(){
				console.log(this.username),
				alert(this.pwd)
				var param={
					'username':this.username,
					'pwd':this.pwd,
				};
				param = querystring.stringify(param);
				axios.post(this.$api+'/user/reg',param).then((response)=>{
					if(response.data.success==true){
						// 注册成功后跳转页面
						Toast(response.data.msg);
						this.$router.push({path:'/'});
					}else{
						Toast(response.data.msg);
						this.$router.push({path:'/'});
					}
				}).catch((error) => {
					//this.$message.error('请求失败');
					console.log(error);
				});
			},
			toLog(){
				this.$router.push({path:'/'})
			}
		}
	}
</script>

<style scoped>
	.reg{
		margin: 10px;
		background-color: #FAFAFA;
		height: 600px;
		position: relative;
		background: url('~@/assets/regist.png') no-repeat;
	}
	form{
		/* border: 1px solid black; */
		position: relative;
		width: 320px;
		height: 200px;
		top: 200px;
		/* border: 1px solid black;
		border-radius: 10px; */
	}
	input{
		width:210px;
		margin-top: 10px;
		outline: none;
		border-radius: 5px;
		border: none;
	}
	.black{
		border:1px solid black;
		border-radius: 10px;
	}
	table{
		position: relative;
		top:85px;
		left: 40px;
	}
	.grey{
		color: #C8C9CC;
	}
</style>
